<template>
	<view style="color:#fbffef">
		<view class="tab">
			<scroll-view class="scroll-x" scroll-x="true">
				
			</scroll-view>
			<view class="weather-search-container" >
				<view class="weather-container" @click="getWeather()">
					<view class="weather-info"v-if="weatherData">
						<view >
							<text>{{ weatherData.time}}/</text>
							<text>{{ weatherData.cityInfo.city  }}/</text>
							<text>{{ weatherData.data.wendu }}°/</text>
							<text>{{ weatherData.data.forecast[0].type }}/</text>
							<text>{{ weatherData.data.quality }}/</text>
							<text>{{ weatherData.data.forecast[0].high }}/</text>
							<text>{{ weatherData.data.forecast[0].low }}</text>
						</view>
					</view>
					<view class="weather-loading" v-else-if="loading">
						<text>获取天气中...</text>
					</view>
					<view class="weather-placeholder" v-else>
						<text>点击获取天气</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				newsList: [],
				weatherData: null,
				loading: false
			}
		},
		onLoad() {
			this.newsList = getApp().globalData.datalist;
			console.log("onLoad--> newsList: " + this.newsList.length);
			this.getWeather();
		},
		methods: {
			getWeather() {
				this.loading = true;
				uni.request({
					url: 'http://t.weather.sojson.com/api/weather/city/101230501',
					success: (res) => {
						console.log("success-----" + JSON.stringify(res));
						if (res.data.status === 200) {
							this.weatherData = res.data;
						} else {
							uni.showToast({
								title: '天气数据获取失败',
								icon: 'none'
							});
						}
						this.loading = false;
					},
					fail: (eMsg) => {
						console.log("request fail-----" + eMsg);
						uni.showToast({
							title: '网络错误，请重试',
							icon: 'none'
						});
						this.loading = false;
					}
				});
			}
		}
	}
</script>

<style>
	.tab {
		background-color: #1c7cd0;
		width: 100%;
		padding: 10rpx;
	}

	.topBar {
		display: flex;
		flex-direction: row;
		gap: 20rpx;
		line-height: 60rpx;
	}

	.weather-search-container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 15rpx;
	}

	.weather-container {
		flex: 1;
		padding: 15rpx;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 15rpx;
		margin-right: 20rpx;
	}

	.weather-info .city {
		font-size: 26rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.weather-info .temp {
		display: flex;

		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.weather-desc {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.weather-type {
		font-size: 24rpx;
		margin-right: 15rpx;
	}
	.weather-details {
		display: flex;
		flex-direction: column;
		font-size: 20rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.weather-loading, .weather-placeholder {
		font-size: 26rpx;
		text-align: center;
		padding: 20rpx 0;
	}
</style>